<!--
 * @Author: your name
 * @Date: 2020-12-28 11:29:24
 * @LastEditTime: 2020-12-28 14:14:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basiccss\box\lunkuo.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮廓线</title>
    <style>
        /* h2{
            outline-style: outset;
            outline-width: 20px;
            outline-color: #8e44ad;
        } */

        /*
            组合定义
            元素在获取焦点的时候产生，并且轮廓线是不占空间的
            轮廓线显示在边框的外面
            轮廓线不影响页面布局
        */
        /* h2{
            outline: red 30px dashed;
        } */

        input:focus{
            outline: none;
        }
    </style>
</head>
<body>
    <h2>hdcms.com</h2>
    <h3>houdunren,mcoin</h3>
    <hr>
    <input type="text">
</body>
</html>